<template>
	<div class="banner_list table-theme">
		<head-title title="营销--轮播图管理"></head-title>
		<el-card>
			<div class="top-menu">
				<div class="menu-left">
					<select-view
						:option-list="sortList"
						:value="ase"
						placeholder="选择排序"
						type="ase"
						@value="setSelectValue"
					>
					</select-view>
					<select-view
						:option-list="clientList"
						:value="client"
						placeholder="选择类型"
						type="client"
						@value="setSelectValue"
					>
					</select-view>
				</div>

				<div class="menu-right">
					<refresh-button @refresh="refreshPage"></refresh-button>
					<div class="add"><el-button type="primary" @click="data(1)">添加banner</el-button></div>
				</div>
			</div>
			<p class="data-number">总轮播图数：{{ total }}</p>
			<el-table :data="bannerList" border>
				<el-table-column label="id" align="center" prop="id"></el-table-column>
				<el-table-column label="图片" align="center" width="80">
					<template slot-scope="scope">
						<ImgPopover :src="scope.row.image"></ImgPopover>
					</template>
				</el-table-column>
				<el-table-column label="链接" align="center" prop="link"></el-table-column>

				<el-table-column label="类型" align="center" prop="client"></el-table-column>

				<el-table-column label="排序" align="center" prop="sort" width="180"></el-table-column>
				<el-table-column label="上下架" align="center" width="180">
					<template slot-scope="scope">
						<el-switch v-model="scope.row.is_online" :active-value="1" :inactive-value="2" @change="upDown($event, scope.$index)"></el-switch>
					</template>
				</el-table-column>
				<el-table-column label="添加时间" align="center" prop="add_time"></el-table-column>
				<el-table-column label="操作" align="center" width="150">
					<template slot-scope="scope">
						<el-button type="primary" size="mini" @click="data(0, scope.row.id)">修改</el-button>
						<!-- <el-button type="danger" size="mini" @click="del(scope.row.id)">删除</el-button> -->
					</template>
				</el-table-column>
			</el-table>
			<div class="pages"><el-pagination background layout="prev, pager, next, jumper" :total="total" @current-change="init" :current-page="page"></el-pagination></div>
		</el-card>
	</div>
</template>

<script>	
import ImgPopover from '@/components/ImgPopover';
import SelectView from "@/components/SelectView";
export default {
	components: {
		ImgPopover,
		SelectView
	},
	data() {
		return {
			bannerList: [],
			total: 0,
			ase: '',
			client: '',
			sortList: [
				{
					value: 1,
					label: '升序'
				},
				{
					value: 2,
					label: '降序'
				}
			],
			clientList: [
				{
					value: 1,
					label: 'APP'
				},
				{
					value: 2,
					label: '小程序'
				},
				{
					value: 3,
					label: 'PC商城'
				},
				{
					value: 4,
					label: '公众号'
				},
				{
					value: 5,
					label: 'B端咨询'
				},
				{
					value: 7,
					label: 'B端招商轮播图'
				},
				{
					value:9,
					label:'家配大师'
				},
				{
					value: 8,
					label: '默认'
				}
			],
			page: 0
		};
	},
	methods: {
		// 初始化列表
		init(e) {
			this.page = e;
			let data = {
				page: e - 1 ? e - 1 : 0,
				limit: 10,
				order_by: 'sort',
				asc: this.ase,
				client: this.client,
				store_id: localStorage.getItem('store_id')
			};
			this.$http(this.$ApiList.bannerList, data).then(res => {
				this.bannerList = [];
				res.datas.forEach(item => {
					if (item.client == 1) {
						item.client = 'APP';
					} else if (item.client == 2) {
						item.client = '小程序';
					} else if (item.client == 3) {
						item.client = 'PC商城';
					} else if (item.client == 5) {
						item.client = 'B端咨询';
					} else if (item.client == 4) {
						item.client = '公众号';
					}else if (item.client == 6) {
						item.client = '商户主页';
					}else if (item.client == 7) {
						item.client = 'B端招商轮播图';
					}else if (item.client == 8) {
						item.client = '默认';
					}
					
					this.bannerList.push(item);
				});

				this.total = res.counts;
			});
		},
		// 上下架
		upDown(e, index) {
			let data = this.bannerList[index];
			data.is_online = e;

			//console.log(data)
			this.$http(this.$ApiList.bannerDown, data).then(res => {
				if (res.code == 200) {
					this.$layer.msg('操作成功');
				}
			});
		},
		// 删除
		del(id) {},
		// 修改或添加
		data(isAdd, id) {
			if (isAdd == 1) {
				this.$router.push({ path: '/banner_data', query: { isAdd: isAdd } });
			} else {
				//localStorage.setItem('bannerItem', JSON.stringify(this.bannerList[index]));
				this.$router.push({ path: '/banner_data', query: { isAdd: isAdd, id: id } });
			}
		},
		sort() {
			this.init();
		},
		clientScreen() {
			this.init();
		},
		refreshPage() {
			this.page = 1;
			this.ase = '';
			this.client = '';
			
			let data = {
				page: 0,
				limit: 10,
				asc: this.ase,
				order_by: 'sort',
				store_id: localStorage.getItem('store_id')
			};

			this.$http(this.$ApiList.bannerList, data).then(res => {
				this.bannerList = [];
				res.datas.forEach(item => {
					if (item.client == 1) {
						item.client = 'APP';
					} else if (item.client == 2) {
						item.client = '小程序';
					} else if (item.client == 3) {
						item.client = 'PC商城';
					} else if (item.client == 5) {
						item.client = 'B端咨询';
					} else if (item.client == 4) {
						item.client = '公众号';
					}
					this.bannerList.push(item);
				});

				this.total = res.counts;
			});
		},
		setSelectValue(obj){
				const{ type,value } = obj
				switch (type) {
					case 'ase':
						this.ase = value
						break;
					case 'client':
						this.client = value
						break;
					default:
						break;
				}
				this.init()
			}
	},
	created() {
		this.init();
	}
};
</script>
<style scoped="scoped">
.banner_list{
	
}
</style>
